<template>
  <div>
    <ul class="ul">
      <li
        v-for="i in fiftyList.length"
        :key="i"
        ref="sun"
        class="liebiao"
        :class="[{ blue: i == index + 1 }]"
        @click="
          dianjiliebiao(
            fiftyList[index].answers,
            fiftyList[index].userAnswers,
            i - 1
          )
        "
      >
        {{ i }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  methods: {
    ...mapMutations("question", ["SET_INDEX", "SET_ISRIGHT", "SET_SCORE"]),
    dealColor() {
      if (this.isRight) {
        this.$refs.sun[index].style = "background-color: green;";
      } else {
        this.$refs.sun[index].style = "background-color: red;";
      }
    },
    dianjiliebiao(right, userAnswer, index) {
      this.SET_INDEX(index);
      if (!userAnswer.length) {
        this.SET_ISRIGHT(null);
        return;
      }
      if (right == JSON.stringify(userAnswer.sort())) {
        this.SET_ISRIGHT("right");
        this.SET_SCORE(this.score + 1);
      } else {
        this.SET_ISRIGHT("wrong");
      }
    },
  },
  watch: {
    index: {
      handler(newValue, oldValue) {
        if (this.isRight == "right") {
          this.$refs.sun[oldValue].style = "background-color: green;";
        } else if (this.isRight == "wrong") {
          this.$refs.sun[oldValue].style = "background-color: red;";
        } else {
          this.$refs.sun[oldValue].style = "#ccc";
        }
      },
    },
  },
  mounted() {},
  computed: {
    ...mapState("question", ["fiftyList", "index", "isRight"]),
  },
};
</script>

<style scoped>
.left {
  padding-left: 50px;
}

.ul {
  width: 400px;
}

.ul li {
  float: left;
  list-style: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 10px;
  margin-top: 10px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ul li:hover {
  background-color: blue !important;
}

.blue {
  background-color: blue !important;
}

.liebiao {
  background-color: #cccccc;
}
</style>
